<template>
    
</template>
<script setup>
import {ref,onMounted} from "vue"
import Highcharts from 'highcharts/highstock';
import HighchartsMore from 'highcharts/highcharts-more';
import HighchartsDrilldown from 'highcharts/modules/drilldown';
import Highcharts3D from 'highcharts/highcharts-3d';

HighchartsMore(Highcharts)
HighchartsDrilldown(Highcharts);
Highcharts3D(Highcharts);

onMounted(()=>{
    //createPillar()
})

/**
 * 创建柱状图
 * @param {*} id 容器id
 * @param {*} categories x轴数据
 * @param {*} values 值数组
*/
const createPillar=(id,title,categories,values)=>{
    Highcharts.chart(id,{
        legend:{
            enabled:false  // 不显示底部文字
        },
        chart: {
            backgroundColor: '#e8eaeb',
            type: 'column'
        },
        title: {
            text: title
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            categories,// ['2023年1月','2023年6月','2023年12月'],
            crosshair: true
        },
        yAxis: {
            min: 0,
            title: {
                text: ''
            }
        },
        tooltip: {
            // head + 每个 point + footer 拼接成完整的 table
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y} 亩</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                borderWidth: 0
            },
            series: {
                borderWidth: 0,
                dataLabels: {
                    enabled: true,
                    format: '{point.y}'
                }
            }
        },
        series: [{
            name: '土地面积',
            data: values //[49, 71, 106]
        }],
        credits: {
            enabled: false     //不显示LOGO
        }
    });
}

/**
 * 创建环形图
 * @param {*} id 容器id
 * @param {*} categories x轴数据
 * @param {*} values 值数组
*/
const createAnnular = (id,title,value)=>{
    var chart = Highcharts.chart(id, {
        chart: {
            backgroundColor: '#e8eaeb',
            spacing : [40, 0 , 40, 0]
        },
        title: {
            floating:true,
            text: title
        },
        series: [{
            type: 'pie',
            innerSize: '80%',
            name: '地块面积',
            data: [
                ['',       value],
                //['',    8.5]
            ]
        }],
        credits: {
            enabled: false     //不显示LOGO
        }
    }, function(c) { // 图表初始化完毕后的会掉函数
        // 环形图圆心
        var centerY = c.series[0].center[1],
            titleHeight = parseInt(c.title.styles.fontSize);
        // 动态设置标题位置
        c.setTitle({
            y:centerY + titleHeight/2
        });
    });
}

/**
 * 创建饼图
 * @param {*} id 容器id
 * @param {*} mcl 目标亩产
 * @param {*} plannedSpending 	支出
 * @param {*} actualSpending 	预算
*/

const createPie = (id,mcl,plannedSpending,actualSpending) =>{
    Highcharts.chart(id, {
        chart: {
            backgroundColor: '#e8eaeb',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        title: {
            text: `目标：亩产${mcl}`
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.y}',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
                        fontSize: '14px'
                    }
                }
            }
        },
        series: [{
            name: '比例',
            colorByPoint: true,
            data: [
                {
                    name: '支出',
                    y: actualSpending
                }, {
                    name: '预算',
                    y: plannedSpending
                },
            ]
        }],
        credits: {
            enabled: false     //不显示LOGO
        }
    });
}

defineExpose({
    createPillar,
    createAnnular,
    createPie
})

</script>